<!-- 饼图 -->
<template>
  <div ref="echartRef" :class="className" :style="{ height, width }"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
const echartRef = ref<HTMLElement | null>(null);
const props = defineProps({
  id: {
    type: String,
    default: "pieChart",
  },
  className: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "100%",
    required: true,
  },
  height: {
    type: String,
    default: "100%",
    required: true,
  },
  subText: {
    type: Object,
    default: {
      name: "",
      value: "",
    },
  },
  color: {
    type: String,
    default: "#1890FF",
  },
  datas: {
    type: Number,
    default: 100,
  },
});
const options = {
  title: [
    {
      text: props.subText.name,
      x: "center",
      top: "38%",
      textStyle: {
        fontSize: 12,
        color: "#FFFFFF",
        foontWeight: "600",
      },
    },
    {
      text: props.subText.value,
      x: "center",
      top: "50%",
      textStyle: {
        color: props.color,
        fontSize: 18,
      },
    },
  ],
  polar: {
    radius: ["60%", "80%"],
    center: ["50%", "50%"],
  },
  angleAxis: {
    max: 100,
    show: false,
  },
  radiusAxis: {
    type: "category",
    show: true,
    axisLabel: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
  },
  series: [
    {
      type: "bar",
      roundCap: true,
      barWidth: 90,
      showBackground: true,
      backgroundStyle: {
        color: "rgba(66, 66, 66, .3)",
      },
      data: [props.datas],
      coordinateSystem: "polar",
      itemStyle: {
        normal: {
          color: props.color,
        },
      },
    },
  ],
};

onMounted(() => {
  const chart = echarts.init(echartRef.value);
  chart.setOption(options);
  window.addEventListener("resize", () => {
    chart.resize();
  });
});
</script>
